<script setup>
import { useRouter } from 'vue-router';
import { getbanner3 } from '../../api/home'
import { ref } from 'vue';
import { showSuccessToast, showFailToast } from 'vant';

const router = useRouter()
const banner3 = ref([])
const activeNames = ref(0)

function onClickLeft() {
    router.back()

}
getbanner3().then(res => {
    console.log(res.data.data);
    banner3.value = res.data.data
})

function add1() {
    showSuccessToast('预约成功')
    router.push('confirm')

}
</script>


<template>
    <van-nav-bar title="旋转木马" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="box">
        <div class="box2">
            <van-swipe class="my-swipe" indicator-color="white">
                <van-swipe-item v-for="item in banner3" :key="item.id">
                    <van-image :src=item.img />
                </van-swipe-item>
            </van-swipe>

            <h3>摩天轮</h3>

            <van-cell-group>
                <van-cell title="时间：" value="全天开放" />
                <van-cell title="热线：" value="12345" />
                <van-cell title="位置：" value="娱乐区12N" />
            </van-cell-group>

            <h3>服务限制</h3>
            <van-cell-group>
                <van-cell title="年龄限制：无" value="该服务仅限12岁以上年龄玩,如果12岁一下，应在父母的陪同下游玩" />
                <van-cell title="禁止  禁止说明：" value="禁止携带食品、饮品游玩" />
            </van-cell-group>
            <h3>服务介绍</h3>
            <van-collapse v-model="activeNames" :accordion="true">
                <van-collapse-item title="介绍" name="1">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;旋转木马或回转木马是游乐场机动游戏的一种，即旋转大平台上有装饰成木马且上下移动的座位供游客乘坐。最早记录的旋转木马出现于拜占庭帝国时期。
                    约1860年欧洲出现第一个以蒸汽推动的旋转木马。如今在各大小游戏场、商场等地方皆有各式旋转木马。
                </van-collapse-item>

            </van-collapse>
            <van-button type="success" @click="add1">点击预约</van-button>
        </div>
    </div>
</template>

<style scoped>
html,
body,
.box {
    width: 100%;
    height: 100%;
}

h3 {
    width: 100%;
    text-align: center;
}

.van-button {
    width: 30%;
    margin-left: 35%;
}

.van-image {
    height: 100%;
    width: 100%;
}
</style>